import { reqAddHospital, reqGetHospital, reqUpdateHospital } from '@/api/hospital/hospitalSet';
import { Button, Card, Form, Input, message } from 'antd'
import { useForm } from 'antd/lib/form/Form';
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom';
export default function AddOrUpdateHospital() {
    //创建 form 对象
    let [form] = useForm();
    //创建 useNavigate
    let navigate = useNavigate();
    //  获取id
    let {id} = useParams();

    let [loading,setLoading] = useState(false);


    //获取表单数据
    let finish = async ()=>{
        // console.log(form.getFieldsValue());
        //获取表单数据
        let values = form.getFieldsValue();
        if(!id){
            setLoading(true);
            //发送请求  新增
            await reqAddHospital(values);
            setLoading(false);
            //提示
            message.success("新增成功!");
        }else{
            setLoading(true);
            //修改医院信息
            await reqUpdateHospital({
                ...values,
                id
            });
            setLoading(false);
            //提示
            message.success("修改成功!");
        }

       
        //跳转
        navigate("/syt/dashboard/hospitalSet");
    }

    // 请求 单个医院信息
    let gethospital = async ()=>{
        let result =  await reqGetHospital(id as string);
        // console.log(result);

        //设置表格数据回显
        form.setFieldsValue(result);
    }

    //页面初始化
    useEffect(()=>{
       
        // 请求 单个医院信息
        gethospital();
    },[])


    return (
        <Card>
             <Form
                labelCol={{ span: 2 }}
                wrapperCol={{ span: 22 }}
                autoComplete="off"
                form={form}
                onFinish={finish}
            >
                    <Form.Item
                        label="医院名称"
                        name="hosname"
                        rules={[{ required: true, message: '请输入医院名称' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="医院编号"
                        name="hoscode"
                        rules={[{ required: true, message: '请输入医院编号!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="api基础路径"
                        name="apiUrl"
                        rules={[{ required: true, message: '请输入api基础路径' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="联系人姓名"
                        name="contactsName"
                        rules={[{ required: true, message: '联系人姓名不能为空' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="联系人手机"
                        name="contactsPhone"
                        rules={[{ required: true, message: '联系人手机号不能为空' },
                        {pattern: /^1[3-9][0-9]{9}$/, message: '请输入合法的手机号'}]}
                    >
                        <Input />
                    </Form.Item>

                
                    <Form.Item wrapperCol={{ offset: 2, span: 22 }}>
                        <Button loading={loading} type="primary" htmlType="submit">
                        保存
                        </Button>

                        <Button className='ml' type="default" onClick={()=>{
                            // navigate("/syt/dashboard/hospitalSet",{
                            //     replace:true
                            // });

                            navigate(-1);
                        }}>
                        返回
                        </Button>
                    </Form.Item>
                    </Form>

        </Card>
    )
}
